<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>遮罩</title>
        <style type="text/css">
            .wrapper { 
                border: 1px solid blue ; 
                height: 500px ; 
                font: 100px/500px '宋体'; /* font-size / line-height / font-family */
                text-align: center ;
            }
            .odd { background: #dfdfdf ; }
            .even { background: #ffff00 ; }
            .buttons {
                position: fixed ;
                left: 0;
                bottom: 5px;
                width: 100% ;
                background: rgba(188,188,188,0.5);;
                text-align: center ;
            }

            .buttons>.btn-mask {
                display: inline-block ;
                margin: 5px ;
                border: 1px solid #4848f3 ;
                border-radius: 3px;
                padding: 5px ;
                font-size: 16px;
                color: #fff ;
                text-decoration: none ; /* 取消文本装饰效果 */
                user-select: none ;
                background: #6666f7;
            }

            .buttons>.btn-mask:hover {
                background: #4848f3;
                color: #ffff00;
            }

            .mask {
                position: fixed ;
                left: 0 ;
                top: 0 ;
                width: 100% ;
                height: 100% ;
                background: rgba(200,200,200 , 0.5);
            }

            .mask-hide {
                display: none ;
            }

            .mask-show {
                display: block ;
            }

            .dialog {
                position: absolute ;
                left: 50% ;
                top: 50% ;
                width: 300px ;
                height: 200px ;
                margin-left: -150px;
                margin-top: -100px;
                background: #fff ;
                border: 1px solid #dedede ;
                border-radius: 5px ;
                box-shadow: 0 0 5px 4px #ff0 ;
            }

            .dialog>.title-bar {
                height: 30px ;
                background: #dfdfdf ;
            }

            .dialog .title-bar>* {
                height: 30px ;
                line-height: 30px ;
            }

            .dialog .title-bar>.icon {
                float: left;
                width: 30px ;
                text-align: center;
            }
            .dialog .title-bar>.title {
                float: left;
                width: 240px ;
                text-align: left ;
            }
            .dialog .title-bar>.btn-close {
                float: left;
                width: 30px ;
                text-align: center;
                user-select: none ;
            }
            .dialog .title-bar>.btn-close:hover {
                background: #ccc;
            }
        </style>

        <script type="text/javascript">
        ( function(){

            let maskListener = {
                handleEvent(e){
                    e.preventDefault(); // 阻止事件默认行为
                    let m = document.querySelector( '.mask' );
                    m.classList.replace( 'mask-hide'  , 'mask-show' );
                }
            }

            let closeListener = {
                handleEvent(e){
                    e.preventDefault(); // 阻止事件默认行为
                    let m = document.querySelector( '.mask' );
                    m.classList.replace( 'mask-show'  , 'mask-hide' );
                }
            }

            let loadListener = function(){
                // 找到 body 并在其中添加十个div
                const b = document.body ;
                for( let i = 1 ; i <= 10 ; i++ ){
                    let e = document.createElement( 'div' );
                    let list = e.classList ;
                    list.add( 'wrapper' ); // 添加指定的 class name
                    list.add( i % 2 == 0 ? 'even' : 'odd' );
                    e.innerHTML = i ;
                    b.appendChild( e );
                }

                // 为 btn-mask 按钮绑定事件监听器
                const maskBtn = document.querySelector( '.btn-mask' );
                maskBtn.addEventListener( 'click' , maskListener , false );

                const closeBtn = document.querySelector( '.btn-close' );
                closeBtn.addEventListener( 'click' , closeListener , false );
            }
            
            window.addEventListener( 'load' , loadListener , false );
        } )();
        </script>
    </head>
    <body>

        <div class="buttons">
            <a href="http://www.kaifamiao.com" class="btn-mask">弹出遮罩层</a>
        </div>

        <div class="mask mask-hide">
            <div class="dialog">
                <div class="title-bar">
                    <span class="icon">?</span>
                    <span class="title">你有对象吗?</span>
                    <span class="btn-close">X</span>
                </div>
                <div class="content">
                    如果没有的话，可以自己 new 几个。
                </div>
            </div>
        </div>
        
    </body>
    
</html>